<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <link rel="stylesheet" href="" />
  </head>
  <body>
    <div style="border: 1px solid black; width: 100px; height: 130px; overflow: auto">
      The longest word in the english dictionary is: pneumonoultramicroscopicsilicovolcanoconiosis.
    </div>
    <button class="btn1">把滚动条的水平位置设置为 100px</button>
    <button class="btn2">获取水平滚动位置</button>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        $('button').click(function () {
          $('div').scrollLeft(100)
        })

        $('.btn2').click(function () {
          console.log('获取', $('div').scrollLeft())
        })
      })
    </script>
  </body>
</html>
